<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/sign.css" type="text/css" media="screen"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header th:replace="common/top"></header>
<div class="container">
    <form action="/account/signon" method="post" class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="username" class="sr-only">用户名</label>
        <input type="text" name="username" id="username" class="form-control" placeholder="username" required autofocus>
        <label for="password" class="sr-only">密码</label>
        <input type="password" id="password" name="password" class="form-control" placeholder="password" required>
        <label for="phone" class="sr-only">手机</label>
        <input type="text" id="phone" name="phone" class="form-control" placeholder="phone" required>
        <label for="msgcode" class="sr-only">手机验证码</label>
        <input type="text" id="msgcode" name="msgcode" class="form-control" placeholder="msgcode" required>
        <input type="button" class="btn btn-primary" value="获取验证码" id="validationCode" name="validationCode">
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        <p th:if="${msg!=null}" th:text="${msg}"></p>
        <p th:if="${msg1!=null}" th:text="${msg1}"></p>
    </form><div style="text-align: center">
    Need a user name and password?
    <a href="/account/newAccountForm"><button type="button" class="btn btn-link">Register Now!</button></a>
</div>
</div>
<footer th:replace="common/bottom"></footer>
<script type="text/javascript">
    $("#validationCode").click(function(){
        var phone = $("#phone").val();
        if($("#phone").val() && $("#phone").val().length == 11){
            $.ajax({
                cache : false,
                url : "/account/sendSms",
                data : {phone : phone}
            });
            updateButtonStatus();
        }else {
            alert("请输入合法的手机号");
        }
    });

    var countdown=60;
    function updateButtonStatus(){
        var phone = $("#validationCode");
        if (countdown == 0) {
            phone.attr("disabled","false");
            phone.val("免费获取验证码");
            countdown = 60;
            return;
        } else {
            phone.attr("disabled","true");
            phone.val("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {
                updateButtonStatus() }
            ,1000)
    }
</script>
</body>
</html>